<template>
    <div>
        <el-upload
            ref="uploadRef"
            class="upload-demo"
            action="#"
            :show-file-list="false"
            :auto-upload="true"
            :http-request="bindImportExcel"
        >
            <template #trigger>
                <el-button type="primary">导入excel</el-button>
            </template>
        </el-upload>

        <!-- 表格 -->
        <div id="tabelexcel"></div>
    </div>
</template>

<script lang="ts" setup>
import { excelImport } from '@/utils/xlsxutil'
const goodsList = []
const bindImportExcel = data=>{
    excelImport(data.file, document.getElementById('tabelexcel'))
}
</script>

<style lang="scss" scoped>
.upload-demo {
    .el-button {
        width: 80px;
        height: 20px;
        font-size: 12px;
    }
}

// 因为我们的innerhtml是后添加的，也就是vue编译的时候它没赶上，data-xxx
:deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
    td,
    th {
        min-height: 80px;
        height: 30px;
        border: 1px solid #cad9ea;
        color: #666;
    }
    thead th {
        background-color: #cce8eb;
        width: 100px;
    }
    tr:nth-child(odd) {
        background: #fff;
    }
    tr:nth-child(even) {
        background: #f5fafa;
    }
}
</style>
